<template>
  <div class="home">
    <div class="w">
      <div class="container l-screen" ref="container">

        <div class="title clearfix">
          <h1 class="fl">查询</h1>
          <div class="btn fr s-none">
            <el-button v-if="isAdmin && (authorizeCode==101 || authorizeCode==201)" plain class="bmks" type="info" @click="$router.push({name: 'bmks'})">管理部门</el-button>
            <el-button v-if="isAdmin" class="seat" type="warning" @click="$router.push({name: 'seat'})">管理座位</el-button>
            <el-button v-if="isAdmin" class="admin" type="primary" @click="$router.push({name: 'admin'})">管理员工</el-button>
            <el-button v-if="isLogin && authorizeCode!=101" class="personal" type="info" @click="$router.push({name: 'personal'})">个人信息</el-button>
            <el-button v-if="isLogin" type="danger" class="loginOut" @click="outLogin">退出</el-button>
            <el-button v-else class="login" type="info" @click="openLogin">登录</el-button>
          </div>
        </div>

        <!-- 顶部搜索 -->
        <el-col :span="24" class="header-op">
          <el-form :inline="true">
            <!-- <el-form-item>
              <el-select clearable v-model="tiaojian.bm" placeholder="部门" @change="changeDepartment" @clear="clearD">
                <el-option v-for="(item,index) in options.department" :key="index" :label="item.value" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item>
              <el-select clearable v-model="tiaojian.ks" placeholder="科室">
                <el-option v-for="(item, index) in options.section" :key="index" :label="item" :value="item">
                </el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item>
              <el-select v-model="tiaojian.codition" placeholder="搜索类型">
                <el-option v-for="(item,index) in options.codition" :key="index" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input style="width: 250px" placeholder="搜索关键词" v-model="tiaojian.searchText" clearable @keyup.enter.native="goSearch">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click="goSearch">搜索</el-button>
            </el-form-item>
            <!-- <el-form-item>
            <el-button type="primary" plain @click="addWorker">新增</el-button>
          </el-form-item> -->
            <!-- <el-form-item>
            <el-button type="danger" plain @click="delSelections">批量删除</el-button>
          </el-form-item> -->
            <!-- <el-form-item>
            <el-button type="danger" plain>批量冻结</el-button>
          </el-form-item> -->
            <!-- <el-form-item>
            <el-button type="success" plain>批量解冻</el-button>
          </el-form-item> -->

          </el-form>
        </el-col>

        <!-- 表格内容 -->
        <el-table v-loading="loading" stripe :max-height="tableHeight" :data="initData.list" :header-cell-style="{'background-color': '#e8ecf1','color': '#0d2d84'}" :row-style="{'padding': '0px'}" :cell-style="{'padding': '10px 5px'}">

          <!-- <el-table-column align="center" type="selection" width="55">
        </el-table-column> -->

          <!-- <el-table-column align="center" header-align='center' label="id" prop="id" width="55"></el-table-column> -->
          <el-table-column align="center" header-align='center' label="姓名" prop="name" width="100"></el-table-column>
          <el-table-column align="center" header-align='center' label="部门" prop="department" width="150"></el-table-column>
          <el-table-column align="center" header-align='center' label="科室" prop="section" width="150">
          </el-table-column>
          <el-table-column align="center" header-align='center' label="职务" prop="position" width="150">
          </el-table-column>

          <el-table-column align="center" header-align='center' label="房间号" width="90">
            <template slot-scope="scope">
              {{scope.row.seatinfo.roomnumber}}
            </template>
          </el-table-column>
          <el-table-column align="center" header-align='center' label="卡位编号" width="100">
            <template slot-scope="scope">
              {{scope.row.seatinfo.seatid}}
            </template>
          </el-table-column>
          <el-table-column align="center" header-align='center' label="手机" width="120" prop="mobile">
          </el-table-column>
          <el-table-column align="center" header-align='center' label="内线" width="100">
            <template slot-scope="scope">
              {{scope.row.seatinfo.phonenumber}}
            </template>
          </el-table-column>
          <el-table-column align="center" header-align='center' label="IP地址" width="150" v-if="isLogin">
            <template slot-scope="scope">
              {{scope.row.seatinfo.ipaddress}}
            </template>
          </el-table-column>
          <el-table-column align="center" header-align='center' label="邮箱" prop="email">
            <template slot-scope="scope">
              {{scope.row.seatinfo.email == '暂无' ? '' : scope.row.seatinfo.email}}
            </template>
          </el-table-column>

          <!-- <el-table-column align="center" header-align='center' label="管理权限" width="160" prop="admin">
          <template slot-scope="scope">
            <el-select style="width: 120px" v-model="scope.row.admin" @focus="saveOldAdmin(scope.row)" @change="changeState(scope.row)">
              <el-option v-for="item in options.admin" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column> -->

          <!-- <el-table-column label="操作" align="center" width="140" fixed="right">
          <template slot-scope="scope">
            <div class="buttons">
              <el-button @click="showDetail(scope.row)" type="primary" size="mini" icon="el-icon-view"></el-button>
              <el-button @click="changeData(scope.row)" size="mini" icon="el-icon-edit"></el-button>
              <el-button @click="deleteData(scope.row)" type="danger" size="mini" icon="el-icon-delete"></el-button>
            </div>
          </template>
        </el-table-column> -->
        </el-table>

        <!-- 分页 -->
        <el-pagination v-show="this.initData.total > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="params.pageSize" :current-page="params.page" :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="initData.total">
        </el-pagination>

        <!-- 登录 -->
        <el-dialog :visible.sync="dialog.login" width="400px" :close-on-press-escape="false" :show-close="false">
          <template slot="title">
            <!-- <h5 class="dialog-title">登录</h5> -->
            <div class="tabs">
              <a href="javascript:;" ondragstart="return false" :class="loginActive == 0 ? 'active':''" @click="changeTabs(0)">密码登录</a>
              <a href="javascript:;" ondragstart="return false" :class="loginActive == 1 ? 'active':''" @click="changeTabs(1)">短信验证</a>
              <b :style="'transform: translateX(' + tX + 'px)'"></b>
            </div>
          </template>
          <el-form :model="loginInfo" label-width="80px" ref="login" :rules="rules">

            <el-form-item label="手机号" prop="username">
              <el-input style="width: 240px" placeholder="请输入手机号" v-model="loginInfo.username">
              </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" v-show="!loginActive">
              <el-input style="width: 240px" placeholder="请输入密码" v-model="loginInfo.password" @keyup.enter.native="goLogin" type="password">
              </el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="validcode" v-show="loginActive">
              <el-input style="width: 129px" placeholder="请输入验证码" v-model="loginInfo.validcode" @keyup.enter.native="goLogin">
              </el-input>
              <el-button class="code-btn" type="primary" style="height: 39px;" @click="sendCode" :disabled="isSend">{{codeText}}</el-button>
            </el-form-item>
            <div class="btns">
              <!-- <el-button type="primary" @click="goLogin('login')" :disabled="loginInfo.username == '' || loginInfo.password == ''">登录</el-button> -->
              <el-button type="primary" @click="goLogin">登录</el-button>
              <!-- <el-button @click="dialog.login = false">取消</el-button> -->
            </div>

          </el-form>
        </el-dialog>

      </div>
      <!-- 移动端适配 -->
      <div class="container2 s-screen">
        <!-- 顶部搜索 -->
        <el-row>
          <el-col :span="24">
            <el-popover placement="top" width="200" trigger="hover" content="姓名(中文或首字母)、或手机号后四位、或完整卡位编号、或大于四位数的座机号">
              <el-input v-model="params.searchText2" clearable @keyup.enter.native="goSearch2" slot="reference">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </el-popover>
            <el-button type="primary" @click="goSearch2">查询</el-button>
          </el-col>
          <!-- <el-col :span="6" style="text-align:center;">
          </el-col> -->
        </el-row>
        <!-- 表格内容 -->
        <el-table :data="initData.list" style="width: 100%" :row-key="getRowKeys" :expand-row-keys="expands" @expand-change="exChange" @row-click="toggleRowExpansion">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" class="demo-table-expand" label-width="69px">
                <el-form-item label="姓名" style="margin-bottom:0px;">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="部门" style="margin-bottom:0px;">
                  <span>{{ props.row.department }}</span>
                </el-form-item>
                <el-form-item label="科室" style="margin-bottom:0px;">
                  <span>{{ props.row.section }}</span>
                </el-form-item>
                <el-form-item label="职务" style="margin-bottom:0px;">
                  <span>{{ props.row.position }}</span>
                </el-form-item>
                <el-form-item label="房间号" style="margin-bottom:0px;">
                  <span>{{ props.row.seatinfo.roomnumber }}</span>
                </el-form-item>
                <el-form-item label="卡位编号" style="margin-bottom:0px;">
                  <span>{{ props.row.seatinfo.seatid }}</span>
                </el-form-item>
                <el-form-item label="手机号" style="margin-bottom:0px;">
                  <span>{{ props.row.mobile }}</span>
                </el-form-item>
                <el-form-item label="内线" style="margin-bottom:0px;">
                  <span>{{ props.row.seatinfo.phonenumber }}</span>
                </el-form-item>
                <el-form-item label="IP地址" style="margin-bottom:0px;" v-if="isLogin">
                  <span>{{props.row.seatinfo.ipaddress}}</span>
                </el-form-item>
                <el-form-item label="邮箱" style="margin-bottom:0px;">
                  <span>{{props.row.seatinfo.email == '暂无' ? '' : props.row.seatinfo.email}}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column align="center" header-align='center' label="姓名" prop="name">
          </el-table-column>
          <el-table-column align="center" header-align='center' label="手机号" prop="mobile" min-width="116px">
          </el-table-column>
          <el-table-column header-align='center' label="部门" prop="department">
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination v-show="this.initData.total > 5" @current-change="handleCurrentChange2" :page-size="5" :pager-count="5" :current-page="params.page2" layout="prev, pager, next" :total="initData.total">
        </el-pagination>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      tableHeight: 377,
      isLogin: false,
      isClick: false,
      isAdmin: false,
      authorizeCode: '',
      loading: false,
      initData: {
        list: [],
        total: 0,
        dpsinfo: [],
      },
      params: {
        page: 1,
        pageSize: 5,
        searchText: "",
        searchText2: "",
        page2: 1,
        department: '',
        section: '',
        codition: '',
      },
      // 
      options: {
        department: [],
        section: [],
        codition: [
          {
            label: '姓名',
            value: 'name'
          },
          {
            label: '手机号',
            value: 'mobile'
          },
          {
            label: '卡座编号',
            value: 'seatid'
          },
        ]
      },
      // 搜索条件
      tiaojian: {
        bm: '',
        ks: '',
        codition: 'name',
        searchText: '',
      },
      dialog: {
        login: false
      },
      loginActive: 0,
      tX: 58,// 238
      loginInfo: {
        username: "",
        password: "",
        validcode: "",
      },
      rules: {
        username: [{ validator: this.validPhone, trigger: "blur" }],
        password: [{ validator: this.validPassword, trigger: "blur" }],
        validcode: [{ validator: this.validateCode, trigger: "blur" }],
      },
      codeText: '获取验证码',
      isSend: false,
      // 要展开的行，数值的元素是row的key值
      expands: [],
    };
  },
  created() {
    this.getUserInfo();
    if (!this.isLogin) {
      if (!this._isMobile()) {
        this.openLogin();
      }
      this.checkCode();
      return
    }
    // this.getDpsinfo();
    this.init();
    this.$nextTick(() => {
      this.tableHeight = this.$refs.container.offsetHeight - 205;
      // console.log('tableHeight==>', this.tableHeight)
    })
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = this.$refs.container.offsetHeight - 205;
      // console.log(this.tableHeight)
    })
  },
  methods: {
    init() {
      this.params = {
        page: 1,
        pageSize: 5,
        searchText: "",
        searchText2: "",
        page2: 1,
        department: '',
        section: '',
        codition: '',
      };
      this.options.section = [];
      // this.search();
    },
    // 获取用户数据
    getUserInfo() {
      let tokenString = this.$cookies.get("__tk");
      this.authorizeCode = this.$cookies.get("__ac");
      if (!tokenString) {
        this.isLogin = false;
      } else {
        this.isLogin = true;
      }
      if (this.authorizeCode == 101 || this.authorizeCode == 301 || this.authorizeCode == 201) {
        this.isAdmin = true;
      } else {
        this.isAdmin = false;
      }

    },
    // 获取部门科室数据
    getDpsinfo() {
      this.axios({
        method: 'POST',
        url: '/api/all_info/',
        headers: {
          'Token': this.$cookies.get('__tk')
        },
        data: this.$qs.stringify({
          perpageitem: this.params.pageSize,
          page: this.params.page,
          codition: this.params.codition,
          searchText: this.params.searchText
        })
      }).then(res => {
        // console.log('dps res==>', res)
        if (res.data.code == 100) {
          // this.initData.list = res.data.data.personinfo;
          // this.initData.total = res.data.data.pageinfo.totalnum;
          let obj = res.data.data.dpsinfo;
          for (let key in obj) {
            // console.log('key==>', key)
            this.options.department.push({
              value: key,
              chlidren: obj[key]
            })
          }
          // console.log('dpsinfo==>', this.options.department)
        } else {
          this.$message.warning('请询问相关人员(获取部门科室失败)');
        }
      }).catch(error => {
        // console.log('error==>', error)
        this.$message.error(error || "出现错误，请稍后再试")
      })
    },
    // 部门-科室联动
    changeDepartment() {
      this.tiaojian.ks = '';
      for (const i in this.options.department) {
        if (this.options.department[i].value == this.tiaojian.bm) {
          this.options.section = this.options.department[i].chlidren;
          return
        }
      }
    },
    // 登录
    openLogin() {
      if (this.$refs.login) {
        this.$refs.login.resetFields();
      }
      if (this.$refs.login2) {
        this.$refs.login2.resetFields();
      }
      this.dialog.login = true;
    },
    // 切换登录选项
    changeTabs(i) {
      if (this.loginActive == i) {
        return
      }
      if (this.$refs.login) {
        this.$refs.login.resetFields();
      }
      this.loginActive = i;
      this.tX = i == 0 ? 58 : 238;
    },
    // 验证手机
    validPhone(rule, value, callback) {
      if (value === "") {
        // callback();
        callback(new Error("请输入手机号"));
      } else {
        if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {
          callback(new Error("手机格式错误!"));
        } else {
          callback();
        }
      }
    },
    // 验证密码
    validPassword(rule, value, callback) {
      if (this.loginActive == 0) {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
    // 验证码验证
    validateCode(rule, value, callback) {
      if (this.loginActive == 1) {
        if (value === "") {
          callback(new Error("请输入验证码"));
        } else if (!/\d{6}/.test(value)) {
          callback(new Error("验证码错误!"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
    // 检查获取验证码是否倒计时
    checkCode() {
      if (this.$cookies.isKey('total')) {
        this.codeText = `5s后重新发送`;// 倒计时显示
        this.isSend = true;

        let timer = setInterval(() => {
          let time = new Date().getTime();// 获取当前时间
          let date = this.$cookies.get('total') || 0;// 获取验证码有效时间
          if (parseInt((date - time) / 1000) <= 0) {// 判断有效时间是否结束
            clearInterval(timer);
            this.$cookies.remove('total')
            this.codeText = '获取验证码';
            this.isSend = false;
          } else {
            this.codeText = `${parseInt((date - time) / 1000)}s后重新发送`;
          }
        }, 1000)
      }
    },
    //获取验证码
    sendCode() {
      //验证手机格式是否正确
      let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!reg.test(this.loginInfo.username)) {
        this.$message.warning("请输入正确的手机号！")
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: '发送中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      //发起获取验证码请求
      this.axios({
        method: 'POST',
        url: '/api/login/',
        data: this.$qs.stringify({
          username: this.loginInfo.username
        })
      }).then(res => {
        loading.close();
        // console.log('res ==> ', res);
        if (res.data.data.status == 200) {
          this.$message.success('验证码已发送');

          let date = new Date();// 获取验证码的时间
          date.setSeconds(date.getSeconds() + 61)// 加上倒计时的秒数
          this.$cookies.set('total', date.getTime(), 61)// 存入cookies
          this.codeText = `60s后重新发送`;// 倒计时显示
          this.isSend = true;// 禁用按钮

          // clearInterval(timer);// 先清空定时器
          let timer = setInterval(() => {// 定时器开始
            let time = new Date().getTime();// 获取当前时间
            date = this.$cookies.get('total') || 0;// 获取验证码有效时间
            if (parseInt((date - time) / 1000) <= 0) {// 判断有效时间是否结束
              clearInterval(timer);
              this.$cookies.remove('total')
              this.codeText = '获取验证码';
              this.isSend = false;
            } else {
              this.codeText = `${parseInt((date - time) / 1000)}s后重新发送`;
            }
          }, 1000)
        } else {
          this.$message.error('验证码发送失败');
        }
      }).catch(err => {
        loading.close();
        this.$message.error(err || "出现错误，请稍后再试");
      })
    },
    // 登录请求
    goLogin() {
      if (this.isClick) {
        return
      }
      this.isClick = true;
      this.$refs['login'].validate(valid => {
        if (valid) {
          let data = {};
          if (this.loginActive == 0) {
            data = {
              username: this.loginInfo.username,
              password: this.loginInfo.password
            }
          } else {
            data = {
              username: this.loginInfo.username,
              text: this.loginInfo.validcode
            }
          }
          // console.log(data)
          // return
          // 登录请求
          this.axios({
            method: 'POST',
            url: '/api/login/',
            data: this.$qs.stringify(data),
          }).then(res => {
            // console.log('res==>', res)
            if (res.data.data.status == 200) {
              this.$cookies.set('__tk', res.data.data.token);
              this.$cookies.set('__ac', res.data.data.authcode);
              this.$cookies.set('__un', this.loginInfo.username);
              // this.authorizeCode = res.data.data.authcode;
              this.$message.success(res.data.data.msg);
              this.dialog.login = false;
              this.getUserInfo();
            } else {
              this.$message.warning(res.data.data.msg);
            }
            setTimeout(() => {
              this.isClick = false;
            }, 1000);
          }).catch(error => {
            // console.log('error==>', error)
            this.$message.error(error || "出现错误，请稍后再试");
            setTimeout(() => {
              this.isClick = false;
            }, 1000);
          })

        } else {
          // this.$message.warning("请完善信息!");
          setTimeout(() => {
            this.isClick = false;
          }, 1000);
          return false;
        }
      });
    },
    // 退出
    outLogin() {
      if (this.isLogin) {
        this.$cookies.keys().map((cookieName) => {
          this.$cookies.remove(cookieName);
        });
        this.isLogin = false;
        this.isAdmin = false;
        this.$message.success('退出成功');
        this.$router.push({ name: 'home' });
        this.openLogin();
      } else {
        return
      }
    },
    // 清空部门
    clearD() {
      this.tiaojian.section = '';
      this.options.section = '';
      this.goSearch();
    },
    // 搜索
    search() {
      // console.log("发起搜索请求");
      if (this.loading) {
        return
      }
      this.loading = true;// 加载显示
      this.axios({
        method: 'POST',
        url: '/api/all_info/',
        headers: {
          'Token': this.$cookies.get('__tk')
        },
        data: this.$qs.stringify({
          perpageitem: this.params.pageSize,
          page: this.params.page,
          codition: this.params.codition,
          searchText: this.$xss(this.params.searchText),
          section: this.params.section,
          department: this.params.department,
        })
      }).then(res => {
        this.loading = false;
        if (res.data.code == 100) {
          this.initData.list = res.data.data.personinfo;
          this.initData.total = res.data.data.pageinfo.totalnum;
          // this.initData.dpsinfo = res.data.data.dpsinfo;

          this.$message.success('查询成功');
        } else {
          this.$message.warning('查询失败');
        }
      }).catch(error => {
        this.loading = false;
        this.$message.error(error || "出现错误，请稍后再试")
      })
    },
    // 搜索-移动端
    search2() {
      if (!this.params.searchText2) {
        this.$toast('查询条件不能为空')
        return
      }
      if (this.loading) {
        return
      }
      this.$toast.loading({
        message: '查询中...',
        forbidClick: true,
      });// 加载显示
      this.axios({
        method: 'POST',
        url: '/api/getdataonmobile/',
        headers: {
          'Token': this.$cookies.get('__tk')
        },
        data: this.$qs.stringify({
          page: this.params.page2,
          searchText: this.$xss(this.params.searchText2),
        })
      }).then(res => {
        this.loading = false;
        if (res.data.code == 100) {
          this.initData.list = res.data.data.personinfo;
          this.initData.total = res.data.data.pageinfo.totalnum;
          // this.initData.dpsinfo = res.data.data.dpsinfo;
          this.$toast.clear();
          // if (this.params.page2 == 1) {
          //   this.$toast('查询成功');
          // }
        } else {
          this.$toast.fail('查询失败');
        }
      }).catch(error => {
        this.loading = false;
        this.$toast.fail(error);
      })
    },
    // 改变搜索条件
    goSearch() {
      if (!this.isLogin) {
        return this.$message.warning('请先登录')
      }
      this.params.page = 1;
      this.params.department = this.tiaojian.bm;
      this.params.section = this.tiaojian.ks;
      this.params.codition = this.tiaojian.codition;
      this.params.searchText = this.tiaojian.searchText;
      if (!this.params.searchText) {
        this.$message.warning('查询条件不能为空')
        return
      }
      if (this.params.codition == 'name') {
        if (!/^[a-zA-Z\u4E00-\u9FA5]+$/.test(this.params.searchText)) {
          this.$message.warning('请输入2位以上姓名或姓名首字母')
          return
        }
        if (this.params.searchText.length < 2) {
          if (/^[a-zA-Z]+$/.test(this.params.searchText)) {
            this.$message.warning('姓名首字母不得少于两位')
            return
          }
          this.$message.warning('姓名不得少于两位')
          return
        }
      } else if (this.params.codition == 'mobile') {
        if (!/^[0-9]+$/.test(this.params.searchText)) {
          this.$message.warning('请输入至少5位数字')
          return
        }
        if (this.params.searchText.length < 5) {
          this.$message.warning('请输入至少5位数字')
          return
        }
      } else if (this.params.codition == 'seatid') {
        if (!/^[0-9a-zA-Z]+$/.test(this.params.searchText)) {
          this.$message.warning('请输入至少5位')
          return
        }
        if (this.params.searchText.length < 5) {
          this.$message.warning('请输入至少5位')
          return
        }
      }
      this.search();
    },
    // 改变搜索条件
    goSearch2() {
      if (!this.isLogin) {
        return this.$toast('请先登录')
      }
      this.params.page2 = 1;
      this.search2();
    },
    // 当前页
    handleCurrentChange(p) {
      this.params.page = p;
      // console.log('第' + p + '页')
      this.loading = true;// 加载显示
      this.axios({
        method: 'POST',
        url: '/api/all_info/',
        headers: {
          'Token': this.$cookies.get('__tk')
        },
        data: this.$qs.stringify({
          perpageitem: this.params.pageSize,
          page: this.params.page,
          department: this.params.department,
          section: this.params.section,
          codition: this.params.codition,
          searchText: this.params.searchText
        })
      }).then(res => {
        // console.log('res==>', res)
        this.loading = false;
        if (res.data.code == 100) {
          this.initData.list = res.data.data.personinfo;
          this.initData.total = res.data.data.pageinfo.totalnum;
          this.initData.dpsinfo = res.data.data.pageinfo.dpsinfo;
        } else {
          this.$message.warning('查询失败');
        }
      }).catch(error => {
        // console.log('error==>', error)
        this.loading = false;
        this.$message.error(error || "出现错误，请稍后再试")
      })
    },
    // 条/页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.pageSize = val;
      this.loading = true;// 加载显示
      this.axios({
        method: 'POST',
        url: '/api/all_info/',
        headers: {
          'Token': this.$cookies.get('__tk')
        },
        data: this.$qs.stringify({
          perpageitem: this.params.pageSize,
          page: this.params.page,
          department: this.params.department,
          section: this.params.section,
          codition: this.params.codition,
          searchText: this.params.searchText
        })
      }).then(res => {
        // console.log('res==>', res)
        this.loading = false;
        if (res.data.code == 100) {
          this.initData.list = res.data.data.personinfo;
          this.initData.total = res.data.data.pageinfo.totalnum;
          this.initData.dpsinfo = res.data.data.pageinfo.dpsinfo;
        } else {
          this.$message.warning('查询失败');
        }
      }).catch(error => {
        // console.log('error==>', error)
        this.loading = false;
        this.$message.error(error || "出现错误，请稍后再试")
      })
    },
    // 当前页
    handleCurrentChange2(p) {
      this.params.page2 = p;
      this.search2();
    },
    // 获取row的key值
    getRowKeys(row) {
      return row.id;
    },
    // 点击箭头展开一行
    exChange(row, rowList) {
      // console.log('exChange==>', rowList)
      if (rowList.length) { // 只展开一行//说明展开了
        // console.log('expands==>', this.expands)
        if (this.expands.length) {
          if (this.expands[0] == row.id) {
            this.expands = [];// 同一行则收起
          } else {
            this.expands = []
            this.expands.push(row.id)// 展开另一行
          }
        } else {
          this.expands.push(row.id)// 只展开当前行id
        }
      } else { // 说明收起了
        this.expands = []
      }
    },
    // 点击行展开一行
    toggleRowExpansion(row) {
      if (this.expands.length) {
        if (this.expands[0] == row.id) {
          this.expands = [];// 同一行则收起
        } else {
          this.expands = []
          this.expands.push(row.id)// 展开另一行
        }
      } else {
        this.expands.push(row.id)// 只展开当前行id
      }
    },
    // 是否为移动端
    _isMobile() {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
      return flag;
    },
  }
};
</script>

<style lang="scss" scoped>
.home {
  background-color: #fff;
  .container {
    padding: 20px;
    background-color: #fff;
    border-radius: 6px;
    height: calc(100% - 40px);
    .title {
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
      margin-bottom: 10px;
      position: relative;
      height: 41px;
      line-height: 41px;
      overflow: hidden;

      .el-button {
        height: 40px;
        width: auto;
        margin-left: 20px;
      }
    }
    .header-op {
      // padding-bottom: 0;
      height: 62px;
      .el-select,
      .el-input {
        max-width: 200px;
      }
    }
    >>> .el-table {
      margin-bottom: 10px;
    }
    >>> .el-pagination {
      text-align: center;
    }
    >>> .el-dialog {
      border-radius: 6px;
      // .dialog-title {
      //   font-size: 28px;
      //   text-align: center;
      // }
      .tabs {
        display: flex;
        position: relative;
        > a {
          flex: 1;
          font-size: 18px;
          text-align: center;
          height: 30px;
          line-height: 30px;
          color: #c0c4cc;
          &.active {
            color: #0d2d84;
          }
        }
        > b {
          display: block;
          height: 2px;
          width: 64px;
          background-color: #0d2d84;
          position: absolute;
          top: 28px;
          transition: all 0.2s;
        }
      }

      .el-dialog__body {
        padding: 30px 40px;
        .el-form {
          .el-form-item__label {
            height: 40px;
            display: inline-block;
            text-align: justify;
            // text-align-last: justify;
            &::after {
              display: inline-block;
              width: 100%;
              content: "";
              height: 0;
            }
          }
          .code-btn {
            padding-left: 0;
            padding-right: 0;
            width: 100px;
            margin-left: 6px;
          }
          .btns {
            text-align: center;
            margin-bottom: 10px;
            // .el-button + .el-button {
            //   margin-left: 50px;
            // }
            .el-button {
              width: 320px;
            }
          }
        }
      }
    }
  }

  .container2 {
    background-color: #fff;
    border-radius: 6px;
    padding: 20px;
    min-height: calc(100vh - 160px);

    .el-col-24 {
      .el-input {
        // width: 69.3vw;
        width: 77.6%;
      }
      .el-button {
        // width: 18.6vw;
        width: 20.8%;
        height: 40px;
      }
    }
    >>> .el-table__expanded-cell {
      background-color: #eee !important;
    }
    .el-pagination {
      text-align: center;
    }
  }
}
</style>